<template>
  <div class="articlescomment">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :class="isShow == true ? 'list1' : 'list'"
      ref="scroll"
      :immediate-check="false"
      class="lists"
    >
      <van-cell v-for="(item, index) in list" :key="index">
        <van-cell icon="shop-o">
          <template #icon>
            <van-image
              width="1.1rem"
              height="1.1rem"
              fit="cover"
              :src="item.aut_photo"
              round
            />
            <span class="aut_name">{{ item.aut_name }}</span>
          </template>
          <template #right-icon>
            <van-icon
              name="like-o"
              class="like"
              @click="btn(item)"
              v-if="!item.is_liking"
            />
            <van-icon
              name="like"
              class="like"
              :class="{ notlike: item.is_liking == true }"
              @click="btn(item)"
              v-else
            />
          </template>
        </van-cell>
        <van-cell title="" label="" value="">
          <template #label>
            <p class="content">{{ item.content }}</p>
          </template>
        </van-cell>
        <div class="time">
          {{ $moment(times(item.pubdate)).endOf().fromNow() }}
        </div>
      </van-cell>
    </van-list>
    <van-search
      v-model="value"
      shape="round"
      class="emitcomments fabiao"
      placeholder="发表评论"
      show-action
      @focus="isShow = true"
      v-if="isShow == false"
    >
      <template #left>
        <van-icon name="arrow-left" size="0.6rem" class="back" @click="back" />
      </template>
      <template #action>
        <van-icon name="comment-o" size="0.6rem" class="icon1 icon11" />
        <van-badge :content="length" color="#1989fa" class="badge"></van-badge>
        <van-icon name="star-o" size="0.6rem" class="icon1 icon22" />
        <van-icon name="share-o" size="0.6rem" class="icon1 icon33" />
      </template>
    </van-search>
    <van-field
      class="emitcomments other"
      v-if="isShow == true"
      v-model="message"
      @blur="isShow = false"
      rows="2"
      autosize
      type="textarea"
      placeholder="请输入评论"
      size="large"
      v-jjoao
    >
      <template #extra>
        <div class="show" @touchstart.passive="publish">发布</div>
      </template>
    </van-field>
  </div>
</template>

<script>
import { getComments, setCommentslike, deleteCommentslike, showComments } from '../../api/articles'

export default {
  // 组件名称
  name: 'articlescomment',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      message: '',
      list: [],
      loading: false,
      finished: false,
      last_id: null,
      value: '',
      isShow: false,
      length: 0
    }
  },
  created () {
    this.getcommentlists()
  },
  methods: {
    // 上拉加载更多评论功能
    onLoad () {
      this.getcommentlists()
    },
    async getcommentlists () {
      const res = await getComments('a', this.$route.params.id, this.last_id, 10)
      this.list = [...this.list, ...res.data.data.results]
      this.length = res.data.data.total_count
      this.last_id = res.data.data.last_id
      this.loading = false
      if (res.data.data.results.length === 0 || res.data.data.end_id == null || res.data.data.last_id == null) {
        this.finished = true // 告诉list组件直接底部显示没有更多数据
      }
    },
    // 是否点赞喜欢这条评论功能
    async btn (item) {
      item.is_liking = !item.is_liking
      if (item.is_liking) {
        await setCommentslike(item.com_id)
      } else {
        await deleteCommentslike(item.com_id)
      }
    },
    back () {
      this.$router.back()
    },
    // 点击发布评论
    async publish () {
      if (this.message.trim() !== '') {
        const res = await showComments(this.$route.params.id, this.message)
        this.list.unshift(res.data.data.new_obj)
        // 隐藏发表评论输入框
        this.isShow = false
        // 情况输入框的内容
        this.message = ''
        // 获取文章评论总数
        const ress = await getComments('a', this.$route.params.id, this.last_id, 1)
        this.length = ress.data.data.total_count
        // 把当前文章的评论保存在vuex,home页面监听对应文章的评论数量的变化,然后赋值给评论条数
        this.$store.commit('change', { a: this.length, b: this.$route.params.id })
        // 发布完评论滚动到该条评论所在位置
        this.$nextTick(() => {
          let item = document.querySelector('.lists')
          let lastitem = item.firstElementChild
          lastitem.scrollIntoView({ block: "center" })  // .list盒子的第一个子元素滚动到页面的一半位置
        })
      }
    }
  },
  computed: {
    times () {
      // data是使用的时候的参数
      return (data) => {
        return Date.parse(data)
      }
    }
  }
}
</script>
<style scoped lang="less">
.aut_name {
  margin-left: 15px;
}
.like {
  position: absolute;
  right: 0;
}
.content {
  color: #000;
  font-size: 14px;
  padding-left: 20px;
}
/deep/.van-cell__title {
  width: 100%;
}
p {
  padding: 0;
  margin: 0;
}
.badge {
  position: absolute;
  bottom: 30px;
  right: 90px;
}

.time {
  margin-left: 18px;
  font-size: 12px;
  color: gray;
  margin-bottom: 10px;
}
.notlike {
  color: red;
}
.emitcomments {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99999999;
}
.icon1 {
  margin: 0 10px;
}
.icon11 {
  position: relative;
  bottom: -5px;
}
.icon22 {
  position: relative;
  bottom: -3px;
}
.icon33 {
  position: relative;
  bottom: -4px;
}
.back {
  margin-right: 5px;
}
/deep/ .van-icon-search {
  display: none;
}
.list {
  margin-bottom: 50px;
}
.list1 {
  margin-bottom: 80px;
}
/deep/ textarea.van-field__control {
  background-color: #eee;
  border-radius: 5px;
  padding: 0 5px;
  height: 66px !important;
}
.show {
  line-height: 66px;
  margin-left: 10px;
}
/deep/ .van-cell {
  padding-top: 2px;
  padding-bottom: 8px;
}
</style>
